<template>
  <div v-loading="loading" class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('股权架构') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('合伙企业名称')" prop="hhqyId">
        <MainBodySelect
          v-model="queryParams.hhqyId"
          parameters="hhqy"
          @change="getData"
        />
      </el-form-item>
    </el-form>
    <div v-show="isShow" class="fund-jgt-div" style="height: 500px;">
      <span>{{ $t('请选择合伙企业后查看架构图') }}</span>
    </div>
    <StructureChart v-show="!isShow" :chart-data="chartData" />
  </div>
</template>

<script>
import MainBodySelect from '@/components/MainBodySelect/index'
import StructureChart from '@/views/hhqy/structure/StructureChart'
import { structureChartData } from '@/api/hhqy/structure/hhqyEquityStructure'
export default {
  components: {
    MainBodySelect,
    StructureChart
  },
  data() {
    return {
      loading: false,
      queryParams: {
        hhqyId: undefined
      },
      chartData: {},
      isShow: true
    }
  },
  methods: {
    getData(id) {
      this.loading = true
      structureChartData(id).then(response => {
        if (response.data) {
          this.isShow = false
          this.chartData = response.data
        } else {
          this.chartData = {}
          this.isShow = true
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
